<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
<div id="fade-obj" style="width:300px;height:300px;background:#000"></div>
<button id="fade-btn" onclick="aaa()">淡出</button>
<script>
//点击按钮时，开始改变 fade-obj 的透明度，开始一个淡出（逐渐消失）动画，直到透明度为0
var btn = document.getElementById("fade-btn");
        var fade = document.getElementById("fade-obj");
        var i = 1;

        function fadeout(){
            fade.style.opacity = i;
            i-=0.1;
            btn.disabled = true;
            if(i>0){
                setTimeout(fadeout,100);
            }else if(i<=0){
                btn.innerText = '淡入';
                btn.disabled = false;
                btn.addEventListener('click',fadein);
            }
        }

        function fadein() {
            fade.style.opacity = i;
            i+=0.1;
            btn.disabled = true;
            if(i<1){
                setTimeout(fadein,100);
            }else if(i>=1){
                btn.innerText = '淡出';
                btn.disabled = false;
                btn.addEventListener('click',fadeout);
            }
        }
        btn.addEventListener('click',fadeout);


</script>
</body>
</html>

